<template>
  <div>
    <div class="tab_list">
      <div @click="getHotShop" :class="n==1?'active':''">热门推荐</div>
      <div @click="getNewShop" :class="n==2?'active':''">上新推荐</div>
      <div @click="getAllShop" :class="n==3?'active':''">所有商品</div>
    </div>
    <ul class="goods_list">
      <li v-for="item in arr" :key="item.id">
        <img :src="$pre + item.img" alt="item.goodsname" />
        <p>现价格：{{ item.price }}</p>
        <del>原价格：{{ item.market_price }}</del>
        <v-button @click="$router.push(`/detail/${item.id}`)">立即抢购</v-button>
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from "axios";
import { reqhomegoods } from '../../../http/http';
export default {
  data() {
    return {
      arr: [],
      hotShop: [],
      newShop: [],
      allShop: [],
      n: 1,
    };
  },
  methods: {
    getHotShop() {
      this.n = 1;
      this.arr = [...this.hotShop];
    },
    getNewShop() {
      this.n = 2;
      this.arr = [...this.newShop];
    },
    getAllShop() {
      this.n = 3;
      this.arr = [...this.allShop];
    },
  },
  mounted() {
    reqhomegoods().then((res) => {
    
      // console.log(res.data.list[0].content);
      this.arr = res.data.list[0].content;
      this.hotShop = res.data.list[0].content;
      this.newShop = res.data.list[1].content;
      this.allShop = res.data.list[2].content;
    });
  },
};
</script>

<style scoped>
.tab_list {
  display: flex;
  justify-content: space-evenly;
}
.tab_list .active {
  background-color: #ff4400;
  padding: 0.1rem;
  color: #fff;
  border-radius: 0.05rem;
  line-height: 0.2rem;
}
img {
  width: 2rem;
  height: 1.5rem;
}
</style>